<template>
  <el-main>
    <el-card class="box-card" v-for="item in articleData" :key="item.articleId">
      <el-header
        height="150px"
        style="
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        "
      >
        <div style="height: 150px; width: 200px">
          <img
            :src="uploadUrl + '/' + item.articlePictureUrl"
            alt=""
            height="130px"
            style="padding: 9px 0"
          />
        </div>

        <!-- 图标 -->
        <!-- 点赞数量 -->
        <el-badge :value="item.articleLikeCount" class="item1">
          <el-button size="small" style="margin-left: 220px">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dianzan1"></use>
            </svg>
          </el-button>
        </el-badge>
        <!-- 评论数量 -->
        <el-badge :value="item.articleCommentCount" class="item1">
          <el-button size="small">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-pinglun"></use>
            </svg>
          </el-button>
        </el-badge>
        <!-- 浏览次数 -->
        <el-badge :value="item.articleViewCount" class="item1" type="primary">
          <el-button size="small">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-liulan"></use>
            </svg>
          </el-button>
        </el-badge>
        <!-- 发布时间 -->
        <el-badge :value="item.createTime" class="item1" type="warning">
          <el-button size="small">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-time"></use>
            </svg>
          </el-button>
        </el-badge>
        <!-- 文章标题 -->
        <el-row class="title">
          <p>
            <el-button plain size="medium" @click="goArticle(item.articleId)">{{
              item.articleTitle
            }}</el-button>
          </p> </el-row
        ><el-input v-model="item.articleIntro" :disabled="true" class="t">
        </el-input>
      </el-header>
    </el-card>
  </el-main>
</template>

<script>
import { getArticles } from "../api/article";
import { postArticleContent, postArticleView } from "../api/index";
import { eventBus } from "../main";
import config from "../config/config";
export default {
  name: "Content",
  mounted() {
    // 用获取兄弟组件传递来的值
    eventBus.$on("changContent", (message) => {
      this.content = message;
      // console.log(this.content);
    });
    getArticles()
      .then(({ data }) => {
        // console.log(data);
        this.articleData = data.data;
      })
      .catch((err) => {
        this.$message.error(err);
      });
  },
  data() {
    return {
      input: "",
      articleData: [],
      content: "",
    };
  },
  methods: {
    // 点击文章标题
    goArticle(articleId) {
      // console.log(articleId);
      this.$router.push({ path: "/article", query: { articleId } });
      postArticleView(articleId);
    },
  },
  computed: {
    uploadUrl() {
      let baseURL = config.baseURL;
      return baseURL;
    },
  },
  watch: {
    // 监听首页右侧栏点击title时触发的事件
    content(val) {
      this.content = val;
      if (val === "new") {
        // 48小时最新排行
        postArticleContent(this.content)
          .then(({ data }) => {
            this.articleData = data.data;
            // console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (val === "comments") {
        // 10天内评论最多的
        postArticleContent(this.content)
          .then(({ data }) => {
            this.articleData = data.data;
            // console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (val === "most") {
        // 10天内浏览次数最多的
        postArticleContent(this.content)
          .then(({ data }) => {
            this.articleData = data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (val === "index") {
        getArticles()
          .then(({ data }) => {
            // console.log(data);
            this.articleData = data.data;
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.t {
  /* position: absolute; 绝对定位 */
  margin: -110px 120px 20px 220px;
  width: 400px;
  display: flex;
  font-family: 楷体;
  display: inline-block;
  align-items: center;
  justify-content: center;
}
.el-aside {
  background-color: white;
  /* height: 80vh;  */
}

.el-header {
  background-color: white;
  margin: 0px 1px 15px 0px;
}
.el-main {
  background-color: white;
  min-height: 500px;
  min-height: calc(100vh - 619.5px);
  height: 0;
  flex-grow: 1;
}
.el-footer {
  border: 1px solid black;
  background-color: white;
  display: flex;
  /* 上下对称 */
  align-items: center;
  /* 左右对称 */
  justify-content: center;
}

/* 导航页面 */
.text {
  font-size: 18px;
}

.item {
  margin-bottom: 14px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  background-color: rgb(255, 253, 253);
}

.title {
  width: 120px;
  margin-left: 220px;
  margin-top: -185px;
}
</style>

// 消息
<style>
.item1 {
  margin-top: -80px;
  margin-right: 40px;
}
</style>